<template>
	<view class="">
		
		<view v-for="(item,index) in weekendList" :key="index" @click="cardClick(item.id)"
			style="border-radius: 20rpx;display: flex;justify-content: center;margin: 20rpx;padding: 14rpx;background-color: #fff;">
			<view style="width: 260rpx;height: 190rpx;border-radius: 20rpx;overflow: hidden;">
				<image style="width: 100%;height: 100%;" :src="imgOne(item.pic)" mode="aspectFill">
				</image>
			</view>
			<view style="width: 100%;margin-left: 20rpx;display: flex;flex-direction: column;">
				<view style="font-size: 28rpx;margin-bottom: 12rpx;">
					{{item.title}}
				</view>
				<view
					style="margin-bottom: 12rpx;font-size: 26rpx;color: #909399;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;">
					{{item.content}}
				</view>
				<view style="margin-bottom: 12rpx;display: flex;line-height: 1em;">
					<u-icon name="map" size="16" color="#909399"></u-icon>
					<text style="font-size: 26rpx;color: #909399;">{{item.address}}</text>
				</view>
				<view style="display: flex;justify-content: flex-end;">
					<view style="margin-left: 10rpx;font-size: 22rpx;color: #909399;">{{item.createTime}}</view>
					<view
						style="margin-left: 10rpx;display: flex;justify-content: start;font-size: 22rpx;color: #909399;align-items: center;">
						<u-icon color="#20C3FE" name="eye"></u-icon>
						<text>{{item.lookNum}}</text>
					</view>
					<view
						style="margin-left: 10rpx;display: flex;justify-content: start;font-size: 22rpx;color: #909399;align-items: center;">
						<u-icon name="more-circle" color="#ffaa00"></u-icon>
						<text>{{item.collect}}</text>
					</view>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import {
		getWeekendTour
	} from '../../config/api.js'
	// const baseUrl = 'http://localhost:8080'
	import {mapGetters} from 'vuex'
	export default {
		data() {
			return {
				weekendList: []
			}
		},
		onLoad() {
			this.getWeekendTourList()
		},
		computed:{
			...mapGetters(['getBaseUrl'])
		},
		methods: {
			getWeekendTourList() {
				getWeekendTour().then(res => {
					this.weekendList = res.data.data.map(item => {
						return {
							id: item.id,
							address: item.address,
							collect: item.collect,
							content: item.content,
							createBy: item.createBy,
							title: item.title,
							pic: this.getBaseUrl + item.pic,
							createTime: item.createTime,
							lookNum:item.lookNum
						}
					})
				})
			},
			cardClick(id) {
				uni.navigateTo({
					url: `/pages/weekendTour/weekendTour?id=${id}`
				})
			},
			imgOne(url) {
				let src = url.split(",")[0];
				return src
			},
			mount(e){
				if(e == 0){
					return '朝南'
				}
				if(e == 1){
					return '朝东'
				}
				if(e == 2){
					return '朝西'
				}
				if(e == 3){
					return '朝北'
				}
			}
		}
	} 
	
</script>

<style scoped lang="scss">

</style>